<template>
	<view class="warp warp-back">
		<view class="uni-back-view">
			<view class="uni-eva-view">
				<view class="uni-eva-title"><text>请您评价让我们做的更好</text></view>
				<view class="uni-eva-item">
					<text class="text">运单号:</text><text>{{order.order_sn}}</text>
				</view>
				<view class="uni-eva-item">
					<text class="text">送达时间:</text><text>{{order.arrive_time}}</text>
				</view>
				<view class="uni-eva-star" v-for="(item ,index) in rateList" :key="index">
					<view class="uni-eva-star1"><text>{{item.title}}</text></view>
					<view class="uni-eva-star2"><uni-rate v-model="item.value" size="20" :max="5" margin="8" /></view>
					<view class="uni-eva-star3">
						<text>{{ getTitleEva(item) }}</text>
					</view>
				</view>
				
				<view class="uni-eva-tag">
					<!-- <view class="uni-eva-tag-title"><text>标题</text></view> -->
					<view class="uni-eva-tag-view">
						<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false" @change="change">
							<uni-grid-item v-for="(item, index) in taglist" :index="index" :key="index">
								<view class="grid-item-box" :class="item.select ? 'grid-item-box-select' :'grid-item-box-unselect'">
									<text class="text">{{item.title}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
				<view class="uni-eva-text">
					<textarea class="textarea" placeholder="请填写您对司机的评价" placeholder-class="placetext" v-model="evaluateData.remake"></textarea>
				</view>
				<view class="uni-eva-btn">
					<view class="btn" @click="submitClick"><text>提交</text></view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			rateList:[
				{
					title: '服务态度',
					name: '非常好',
					value: 5,
					tag: 'taidu',
				},
				{
					title: '服务质量',
					name: '非常好',
					value: 5,
					tag: 'zhiliang',
				},
				{
					title: '运输时效',
					name: '非常好',
					value: 5,
					tag: 'shixiao',
				},
			],
			order:{},
			evaluateData: {
				td_score:'',
				zl_score:'',
				sx_score:'',
				tags: [],
				remake: ''
			},
			taglist: [],
		};
	}, 
	onLoad(option) {
		// #ifdef APP-PLUS
		var obj = JSON.parse(option.obj);
		// #endif
		
		// #ifdef MP-WEIXIN
		var obj = JSON.parse(decodeURIComponent(option.obj));
		// #endif
		this.order = obj.order;
		this.getCommentTagsData();
	},
	methods: {
		getTitleEva(e) {
			var fen = '非常好';
			switch (e.value) {
				case 1: {
					fen = '非常差';
					break;
				}
				case 2: {
					fen = '差';
					break;
				}
				case 3: {
					fen = '一般';
					break;
				}
				case 4: {
					fen = '好';
					break;
				}
				case 5: {
					fen = '非常好';
					break;
				}
				default:
					fen = '非常好';
					break;
			}
			e.name = fen;
			return fen;
		},
		change(e) {
			var index = e.detail.index;
			if(this.taglist[index].select){
				this.taglist[index].select = false;
			} else{
				this.taglist[index].select = true;
			}
		},
		getCommentTagsData(){
			this.http.sendRequest({
				api: this.api.order.sOrderCommentTagsApi,
				data: {},
				success: res => {
					if (res.success == 'true' && res.data) {
						this.tagsHeadle(res.data.tag_list)
					}
				}
			});
		},
		tagsHeadle(e){
			const that = this;
			e.forEach(function(item, index) {
				var data = {
					title:item,
					select:false
				}
				that.taglist.push(data);
			});
		},
		submitClick(){
			this.evaluateData.tags = [];
			this.taglist.forEach(function(item, index) {
				if(item.select){
					this.evaluateData.tags.push(item.title);
				}
			});
			
			if(this.evaluateData.tags.length <= 0){
				uni.showToast({
					title:'请选择评价标签'
				})
				return;
			}
			if(this.check.isNull(this.evaluateData.remake)){
				uni.showToast({
					title:'请填写评价内容'
				})
				return
			}
			
			this.rateList.forEach(function(item, index) {
				if(item.tag == 'taidu'){
					 this.evaluateData.td_score = item.value;
				}
				if(item.tag == 'zhiliang'){
					this.evaluateData.zl_score = item.value;
				}
				if(item.tag == 'shixiao'){
					this.evaluateData.sx_score = item.value;
				}
			});
			
			this.submitData();
		},
		submitData(){
			var data = {
				order_id:this.order.order_id,
				td_score:this.evaluateData.td_score,
				zl_score:this.evaluateData.zl_score,
				sx_score:this.evaluateData.sx_score,
				tags:JSON.stringify(this.evaluateData.tags),
				content:this.evaluateData.remake,
			}
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.order.sAddOrderCommentApi,
				data: data,
				success: res => {
					console.log(res)
					if (res.success == 'true' && res.data) {
						 
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail:res =>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.warp-back {
	height: 100%;
}
.uni-back-view {
	width: 100%;
	height: 100%;
	background-color: #fff;
	.uni-eva-view {
		padding-top: 32rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.uni-eva-title {
			display: flex;
			align-items: center;
			justify-content: center;
			color: $uni-text-color-primary;
			font-size: 32rpx;
		}
		.uni-eva-item{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: $uni-text-color;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
			font-size: 28rpx;
			.text{
				width: 160rpx;
			}
		}
		.uni-eva-star {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding-top: 32rpx;
			padding-bottom: 32rpx;
			color: $uni-text-color;
			font-size: 30rpx;
			.uni-eva-star1 {
			}
			.uni-eva-star2 {
				margin-left: 32rpx;
			}
			.uni-eva-star3 {
				margin-left: 32rpx;
			}
		}
		.uni-eva-tag {
			.uni-eva-tag-title{
				padding-top: 16rpx;
				padding-bottom: 8rpx;
			}
			.uni-eva-tag-view {
				padding-top: 32rpx;
				padding-bottom: 32rpx;
				.grid-item-box{
					display: flex;
					align-items: center;
					justify-content: center;
					padding-top: 6rpx;
					padding-bottom: 6rpx;
					margin-left: 16rpx;
					margin-right: 16rpx;
					border-radius: 10rpx;
					border: 1rpx solid $uni-text-color-primary;
				}
				.grid-item-box-select{ 
					border: 1rpx solid $uni-text-color-primary;
					background-color:$uni-btn-color-primary;
					color:#fff;
				}
				.grid-item-box-unselect{
					color: $uni-text-color-primary;
					background-color: #fff;
					border: 1rpx solid $uni-border-color-primary;
				}
			}
		}
		.uni-eva-text {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			margin-right: 32rpx;
			.textarea {
				width: 100%;
				height: 140rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				padding-left: 16rpx;
				padding-top: 4rpx;
				border: 1px solid #c8c7cc;
			}
			.placetext {
				color: $uni-text-color-placeholder;
				font-size: 24rpx;
			}
		}
		.uni-eva-btn {
			width: 100%;
			display: inline-block;
			background-color: #fff;
			.btn {
				margin-left: 64rpx;
				margin-right: 64rpx;
				margin-top: 64rpx;
				margin-bottom: 64rpx;
				height: 90rpx;
				border-radius: 12rpx;
				background-color: $uni-btn-color-primary;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
}
</style>
